<template>
  <div class="box">
    <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>考勤报表</el-breadcrumb-item>
    <el-breadcrumb-item>考勤记录</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="record">
   
    <div class="an">   <el-input
      v-model="input2"
      class="w-50 m-2"
      placeholder="请选择部门"
      :prefix-icon="Search"
      @change="bumen"
    /></div>
 
    <div class="an">   <el-input
      v-model="input"
      class="w-50 m-2"
      placeholder="请选择员工"
      :prefix-icon="Search"
      @change="yuangong"
    /></div>
 
<div class="an"> 
    <el-select @change="jia" v-model="form.region" placeholder="请假类型">
      <el-option label="事假" value="事假" />
      <el-option label="年假" value="年假" />
      <el-option label="婚假" value="婚假" />
    </el-select>
  </div>

 <div class="an">
  <el-button  @click="tableto()" type="primary">员工请假</el-button>
 </div>
  </div>

  <div class="table">
    <div class="biao"> <span>请假记录</span>
      &emsp;
      <el-button  @click="dd()" type="primary">查看所有</el-button>
    </div>
  <el-table :data="tableData" size="large " border style="width: 100%" fit>
    <el-table-column label="序号" type="index"/>
    <el-table-column prop="qq" label="姓名" width="180" />
    <el-table-column prop="ww" label="部门" width="180" />
    <el-table-column prop="ee" label="请假类型" />
    <el-table-column prop="rr" label="请假开始时间" />
    <el-table-column prop="tt" label="请假结束事件" />
 
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button type="danger" @click="edit(scope.row)">修改</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
   
  </el-table>
  </div>

  <el-dialog v-model="bool" :title="!dtt.id?'新增请假信息':'修改请假信息'"
  width="30%" center>
    <el-form :model="dtt" :rules="rules"  ref="ruleFormRef"
    >
    <el-form-item label="id" v-show="false"  prop="id">
        <el-input v-model="dtt.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="qq">
        <el-input :disabled="dtt.id ? true:false" v-model="dtt.qq" autocomplete="off" />
      </el-form-item>

      <el-form-item label="所属部门" :label-width="formLabelWidth" prop="ww">
        <el-select :disabled="dtt.id ? true:false"
         v-model="dtt.ww" placeholder="请选择部门">
          <el-option label="行政部" value="行政部" />
          <el-option label="考勤组" value="考勤组" />
          <el-option label="安全部" value="安全部" />
          <el-option label="保卫科" value="保卫科" />
        </el-select>
        
      </el-form-item>
     
      <el-form-item :disabled="lala" label="请假类型" :label-width="formLabelWidth" prop="ee">
        <el-select v-model="dtt.ee" placeholder="请选择请假类型">
          <el-option label="事假" value="事假" />
          <el-option label="病假" value="病假" />
          <el-option label="婚假" value="婚假" />
          <el-option label="产假" value="产假" />
          <el-option label="育儿假" value="育儿假" />
        </el-select>
        
      </el-form-item>

      <el-form-item  label="请假时间"  prop="rr">
        <!-- <el-input :disabled="dtt.id?true:false" v-model="dtt.rr" autocomplete="off" /> -->
        <el-date-picker
        v-model="dtt.rr"
        type="datetime"
        placeholder="请假开始时间"
        format="YYYY/MM/DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
      </el-form-item>

      <el-form-item label="结束时间" :label-width="formLabelWidth" prop="tt">
        <!-- <el-input v-model="dtt.tt" autocomplete="off" /> -->

        <el-date-picker
        v-model="dtt.tt"
        type="datetime"
        placeholder="请假结束时间"
        format="YYYY/MM/DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  </div> 

 


</template>

<script setup >
import { ArrowRight } from '@element-plus/icons-vue'
import * as service from '@/api/wenbo/wenbo'
import { ref,onMounted } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import { ElDrawer, ElMessageBox } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
import { ElNotification } from 'element-plus'

let bool=ref(false)
let form = ref({region:''})
let form1 = ref({region:''})
let tableData = ref([])
let input = ref('')
let input2 = ref('')
let ruleFormRef = ref()


let rules = ref({
  qq: [{ required: true, message: '请输入内容', trigger: 'change' }],
  ww:[{ required: true, message: '请输入内容', trigger: 'change' }],
  ee:[{ required: true, message: '请输入内容', trigger: 'change' }],
  rr: [{ required: true, message: '请输入内容', trigger: 'change' }],
  tt:[{ required: true, message: '请输入内容', trigger: 'change' }],
  
})

let dtt = ref({
    id:'',
    qq:'',
    ww:'',
    ee:'',
    rr:'',
    tt:'',

  }
)

let xuan = async ()=>{
  let res = await service.qingjia()
  console.log(res);
  tableData.value = res.data
}

onMounted( ()=>{
  xuan()
}
)
let dd = () => {
  xuan()
}

let tableto = () => {
bool.value=true

dtt.value =  {
    id:'',
    qq:'',
    ww:'',
    ee:'',
    rr:'',
    tt:'',
  }
}

let bumen = async () => {
  let res = await service.qingjia({ww_like:input2.value})
  tableData.value = res.data
  
}
let yuangong = async () => {
  let res = await service.qingjia({qq_like:input.value})
  tableData.value = res.data
  
}

let jia = async () => {
  console.log(form.value.region);
  let res = await service.qingjia({ee_like:form.value.region})
  tableData.value = res.data
}

let ban = async () => {
  console.log(form.value.region);
  let res = await service.qingjia({yy_like:form1.value.region})
  tableData.value = res.data
}

let dialogFormVisible = async ()=> {
  if(dtt.value.id){
      let ok = await service.qingjiaedit({"id":dtt.value.id,"tt":dtt.value.tt,"ww":dtt.value.ww,"ee":dtt.value.ee,"rr":dtt.value.rr})
      console.log(ok);
     if(ok.status == 200){
      ElNotification({
  title: '通知',
  message: '修改成功',
  type: 'success',
})
bool.value = false
     }
    }else{
      ruleFormRef.value.validate(async (valid)=>{  
      if(valid){
    let res = await service.qingjiaadd(dtt.value )
if(res.status == 201){
  ElNotification({
  title: '通知',
  message: '新增成功',
  type: 'success',
})
xuan()
bool.value = false
}
  
    }
   
  }
  
  )
      
    }

  
  
  
  
}

let del = async (a) => {
  console.log(a);
  let res = await service.qingjiadel({id:a} )
  console.log(res);
 let i = tableData.value.findIndex(item=>item.id == a)

 tableData.value.splice(i,1)

 ElNotification({
    title: '通知',
    message: '删除成功',
    type: 'success',
  })
}

let edit = (a) => {
console.log(a);
bool.value = true
dtt.value = a
}

let quxiao = () => {
  bool.value = false
  xuan()
}

</script >

<style lang="scss" scoped>
.big{
      width: 100%;
    }
.record{
  width: 100%;
  height: 80px;
  background: #eee;
  margin:20px auto;
  display: flex;
  align-items: center;
  .an{
    margin-left: 20px;
  }
  
}
.box{
  width: 100%;
}
.table{
  width: 95%;
  height: 100%;
  margin: 0 auto;
  .biao{
    width: 100%;
    height: 60px;
    background: #eee;
    margin: 20px auto;
    font-size: 20px;
    line-height: 60px;
    text-indent: 30px
  }
}









.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>